let gulp = require("gulp")

gulp.task("default", function() {
  console.log("gulp启动成功") //测试gulp是否启动
})
// 加载htmlmin模块：
var htmlmin = require("gulp-htmlmin")
gulp.task("html", function() {
  gulp
    .src("src/**/*.html")
    .pipe(
      htmlmin({
        collapseWhitespace: true,
        removeComments: true
      })
    )
    //最后把你建立的html文件压缩到自动创建的dist文件里;
    .pipe(gulp.dest("dist/"))
})
// 丑化js
// let uglify = require("gulp-uglify")
// gulp.task("js", () => {
//   gulp
//     .src("src/**/*.js")
//     .pipe(uglify())
//     .pipe(gulp.dest("dist/"))
// })
var uglify = require("gulp-uglify")
let babel = require("gulp-babel")
gulp.task("js", function() {
  gulp
    .src("src/**/*.js")
    .pipe(babel())
    .pipe(uglify())
    .pipe(gulp.dest("dist"))
})

var scss = require("gulp-sass")
var cssnano = require("gulp-cssnano")
var stylus = require("gulp-stylus")
var sourcemaps = require("gulp-sourcemaps")
var concat = require('gulp-concat');
//因为我用的是scss,所以这里注册任务写成了scss;
gulp.task("scss", function() {
  gulp
    .src("src/**/*.scss")
    .pipe(scss())
    .pipe(cssnano())
    .pipe(gulp.dest("dist/"))
})
gulp.task("stylus", function() {
  gulp
    .src("src/**/*.styl")
    .pipe(stylus())
    .pipe( concat('all.css') )
    .pipe(sourcemaps.init())
    .pipe(cssnano())
    .pipe(gulp.dest("dist/"))
})

var imagemin = require("gulp-imagemin")
var cache = require("gulp-cache")
gulp.task("image", function() {
  gulp
    .src("src/**/*.{jpg,png,gif,svg}") //要处理的图片目录为img目录下的所有的.jpg .png .gif 格式的图片;
    .pipe(
      cache(
        imagemin({
          progressive: true, //是否渐进的优化
          svgoPlugins: [{ removeViewBox: false }], //svgo插件是否删除幻灯片
          interlaced: true //是否各行扫描
        })
      )
    )
    .pipe(gulp.dest("dist/"))
})
// var watch = require('gulp-watch')
gulp.task("watch", ["scss", "js", "html", "image"], function() {
  gulp.watch("src/**/*.scss", ["scss"])
  gulp.watch("src/**/*.js", ["js"])
  gulp.watch("src/img/*.*", ["image"])
  gulp.watch("src/**/*.html", ["html"])
  gulp.watch("src/**/*.styl", ["stylus"])
})
gulp.task("default", ["watch", "html", "scss", "image", "js", "stylus"], function() {
  gulp.start("watch", "html", "scss", "image", "js", "stylus")
})
